<template>
  <div>
    <div class="header border-bottom">
      <p class="header-title">{{chooseList.title}}</p>
      <div>
          <span class="header-tips" v-for="(item, index) in chooseList.tips" :key="index">
            <img :src="item.iconUrl"
                 class="header-icon" alt=""/>
            {{item.text}}
          </span>
        <div
          class="iconfont header-backbtn"
          @click="handleIntroduceShow"
        >&#xe642;</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IntroduceHeader',
  props: {
    chooseList: Object
  },
  methods: {
    handleIntroduceShow () {
      this.$emit('introduceClose')
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/mixins.styl";
  .border-bottom
  &:before
   border-color: #666;
  .header
    padding: .4rem .2rem;
    position: relative;
    .header-title
      font-weight: bold;
      font-size: .32rem;
      line-height: .45rem;
      margin-bottom: .18rem;
      width: 90%;
      ellipse();
    .header-tips
      font-size: .24rem;
      line-height: .24rem;
      color: #616161;
      height: .24rem;
      margin: .4rem .04rem 0;
      padding: .04rem;
    .header-icon
      width: .2rem;
    .header-backbtn
      width: .88rem;
      height: 1rem;
      color: #9e9e9e;
      position: absolute;
      top: 0;
      right: 0;
      text-align: center;
      line-height: 1rem;
      font-size: .4rem;
      z-index: 2;
</style>
